<template>
    <div v-loading.body.fullscreen.lock="loading" :element-loading-text="loadingText" ref="container" class="container">
    </div>



    <!-- <div v-for="item in waterData" :key="item.name" class="water" :id="item.id" @click="clickWater(item, $event)">
        <img class="img" :src="出现紧急情况1" alt="">
        <span class="text">{{ item.name }}</span>
    </div> -->
    <!-- <div class="road">
        <img  class="img" :src="警报" alt="">
    </div> -->
    <!-- <div class="card">
        <img  class="img" :src="警报" alt="">
    </div> -->
    <WaterPopup ref="waterPopupRef" :currentDate="currentWaterDate" />
    <CarPopup ref="carPopupRef" :currentDate="currentCarDate" />
</template>

<script setup>
import { ref, onMounted, onUnmounted, watchEffect, nextTick, watch } from 'vue'
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
import { CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';
import { elRectification } from 'autofit.js'
import { clearWeather, createWeather } from '@/utils/weather.js'

import gsap from 'gsap';
import { GUI } from 'dat.gui';
import 警报 from '@/assets/imgs/map/警报.png';
import 车道指示器 from '@/assets/imgs/map/车道指示器.png';
import 摄像头 from '@/assets/imgs/map/摄像头.png';
import 出现紧急情况1 from '@/assets/imgs/map/出现紧急情况 (1).png'
import 全部 from '@/assets/imgs/map/全部.png'
import 消防设备 from '@/assets/imgs/map/消防设备.png'
import 大巴车 from '@/assets/imgs/map/大巴车.png'
import 货车 from '@/assets/imgs/map/货车.png'
import 汽车 from '@/assets/imgs/map/汽车.png'
import 晴天 from '@/assets/imgs/environment/晴天.png';
import 多云 from '@/assets/imgs/environment/多云.png';
import 阴天 from '@/assets/imgs/environment/阴天.png';
import 雨天 from '@/assets/imgs/environment/雨天.png';
import 雪天 from '@/assets/imgs/environment/雪天.png';
import 返回 from '@/assets/imgs/environment/fanhui.png';

import useViewEvent from '@/hooks/useViewEvent'
import { useRoute } from 'vue-router';
import WaterPopup from './waterPopup/index.vue'
import CarPopup from './carPopup/index.vue'

const container = ref(null);
let renderer, scene, camera, controls, gui, loader, css2Renderer, globalTime, masterModel, draco, clock, animationFrameId;

const loading = ref(false);
const loadingText = ref('加载中...')

const route = useRoute()
const roadData = [
    {
        name: '监控',
        img: 摄像头,
        id: 2
    },
    {
        name: '监控001',
        img: 摄像头,
        id: 2
    },
    {
        name: '监控002',
        img: 摄像头,
        id: 2
    },
    {
        name: '右上消防',
        img: 消防设备,
        id: 3
    },
    {
        name: '左上消防',
        img: 消防设备,
        id: 3
    },
    {
        name: '左下消防',
        img: 消防设备,
        id: 3
    },
    {
        name: '芒康路牌',
        img: 车道指示器,
        id: 1
    },
    {
        name: '桥头路牌',
        img: 车道指示器,
        id: 1
    }
]
const waterData = [
    {
        id: '结冰',
        name: '路面结冰',
        options: {
            offset: [-40, -27, 0],
            rotation: [0, Math.PI / 2, 0],
        }
    },
    {
        id: '积水',
        name: '路面积水',
        options: {
            offset: [-42, -28, -80],
            rotation: [0, 0, 0],
        }
    },
    {
        id: '落石',
        name: '落石',
        options: {
            offset: [62, -28, -80],
            rotation: [0, Math.PI, 0],
        }
    }
]
const currentWaterDate = ref({})
const waterPopupRef = ref(null)
const currentCarDate = ref({})
const carPopupRef = ref(null)
const cardData = [
    {
        name: '大巴01.001',
        url: '/车辆动画/大巴01.001.gltf',
        img: 大巴车,
        data: {
            number: '川A 12345',
            type: '大巴车',
            speed: 234,
            altitude: 2342,
        }
        // url: '/货车关键帧.gltf',
    },
    {
        name: '大巴01.002',
        url: '/车辆动画/大巴01.002.gltf',
        img: 大巴车,
        data: {
            number: '川A 12345',
            type: '大巴车',
            speed: 2342,
            altitude: 45453,
        }
    },
    /* {
        name: '大巴01',
        url: '/车辆动画/大巴01.gltf',
        img: 大巴车
    }, */
    {
        name: '大巴02.001',
        url: '/车辆动画/大巴02.001.gltf',
        img: 大巴车,
        data: {
            number: '川A 12345',
            type: '大巴车',
            speed: 432,
            altitude: 5342,
        }
    },
    // {
    //     name: '大巴02.002',
    //     position: '/车辆动画/大巴02.002.gltf',
    // },
    /*   {
          name: '大巴02',
          url: '/车辆动画/大巴02.gltf',
          img: 大巴车
      }, */
    {
        name: '货车01.001',
        url: '/车辆动画/货车01.001.gltf',
        img: 货车,
        data: {
            number: '川A 12345',
            type: '货车',
            speed: 123,
            altitude: 3560,
        }
    },
    {
        name: '货车01.002',
        url: '/车辆动画/货车01.002.gltf',
        img: 货车,
        data: {
            number: '川A 12345',
            type: '货车',
            speed: 530,
            altitude: 3340,
        }
    },
    /*   {
          name: '货车01',
          url: '/车辆动画/货车01.gltf',
          img: 货车
      }, */
    {
        name: '货车02.001',
        url: '/车辆动画/货车02.001.gltf',
        img: 货车,
        data: {
            number: '川A 12345',
            type: '货车',
            speed: 350,
            altitude: 3400,
        }
    },
    {
        name: '货车02.002反向',
        url: '/车辆动画/货车02.002反向.gltf',
        img: 货车,
        data: {
            number: '川A 12345',
            type: '货车',
            speed: 350,
            altitude: 3000,
        }
    },
    /* {
        name: '货车02',
        url: '/车辆动画/货车02.gltf',
        img: 货车
    }, */
    // {
    //     name: '桥车01.001',
    //     url: '/车辆动画/桥车01.001.gltf',
    // },
    // {
    //     name: '桥车01.002反向',
    //     url: '/车辆动画/桥车01.002反向.gltf',
    // },
    // {
    //     name: '桥车01',
    //     url: '/车辆动画/桥车01.gltf',
    // },
    {
        name: '皮卡01.001',
        url: '/车辆动画/皮卡01.001.gltf',
        img: 汽车,
        data: {
            number: '川A 12345',
            type: '汽车',
            speed: 500,
            altitude: 3545,
        }
    },
    {
        name: '皮卡01.002',
        url: '/车辆动画/皮卡01.002.gltf',
        img: 汽车,
        data: {
            number: '川A 12345',
            type: '汽车',
            speed: 450,
            altitude: 3230,
        }
    },
    /*  {
         name: '皮卡01',
         url: '/车辆动画/皮卡01.gltf',
         img: 汽车
     }, */
]

/** 控制显示 */
const controlShow = () => {
    const path = route.path;
    moveCamera({ x: -14, y: 73, z: 100 })
    // clearWeather()
    clearWater()
    clearRoad()
    clearCarLabel()
    clearCarLoop()
    clearWeather(scene)
    activeEnvironment.value = '晴天'
    activeEquipment.value = '全部'
    switch (path) {
        case '/':
        case '/home':
            loadCar()
            loadWater()
            break
        case '/equipment':
            loadRoad()
            break
        case '/environment':
            createWeather('sunny', scene)
            break
        case '/fast':
            loadWater()
            break
        case '/path':
            showCarLabel()
            break
    }
}
watch(() => route.path, (newPath) => {
    if (masterModel) {
        controlShow();
    }
})

const activeEquipment = ref('全部')
const activeEnvironment = ref('晴天');
/** 点击设备 */
const watchCustomEvent = () => {
    window.addEventListener('changeEquipment', (e) => {
        const { name, id } = e.detail;
        clearRoad()
        activeEquipment.value = name;
        const data = id === 4 ? roadData : roadData.filter(i => i.id === id)
        data.forEach((item) => {
            const obj = masterModel.children.find((child) => child.name === item.name)
            if (!obj || !obj.children.length) return
            obj.children[obj.children.length - 1].visible = true
        })
    })

    window.addEventListener('changeEnvironment', (e) => {
        const { name } = e.detail;
        if (name === '返回') {
            activeEnvironment.value = '';
            clearWeather(scene)
            createWeather('sunny', scene)
            return;
        }
        switch (name) {
            case '晴天':
                activeEnvironment.value = '晴天';
                createWeather('sunny', scene)
                break;
            case '多云':
                activeEnvironment.value = '多云';
                createWeather('cloudy', scene)
                break;
            case '阴天':
                activeEnvironment.value = '阴天';
                createWeather('overcast', scene)
                break;
            case '雨天':
                activeEnvironment.value = '雨天';
                createWeather('rain', scene)
                break;
            case '雪天':
                activeEnvironment.value = '雪天';
                createWeather('snow', scene)
                break;
        }
    })
}

/** 加载积水模型  */
const loadWater = () => {
    waterData.forEach(item => {
        loader.load(
            '/积水.gltf',
            (gltf) => {
                const model = gltf.scene;
                model.position.set(item.options.offset[0], item.options.offset[1], item.options.offset[2]);
                model.rotation.set(item.options.rotation[0], item.options.rotation[1], item.options.rotation[2]);
                scene.add(model);
                // 创建CSS2DObject
                // const dom = document.getElementById(item.id)
                const dom = document.createElement('div')
                dom.className = 'water';
                dom.innerHTML = `
                    <img class="img" src="${出现紧急情况1}" alt="">
                    <span class="text">${item.name}</span>
                `;
                // 添加点击事件
                dom.addEventListener('click', (e) => {
                    e.stopPropagation();
                    clickWater(item, model);
                });
                const tag = new CSS2DObject(dom)
                tag.position.z += 4 // 标签高度偏移量
                model.add(tag) // 标签跟随父对象移动
            }
        )
    })
}
/** 点击积水 */
const clickWater = (item, model) => {
    nextTick(() => {
        currentWaterDate.value = item;
        const modelWorldPos = new THREE.Vector3();
        model.getWorldPosition(modelWorldPos);
        const cameraOffset = new THREE.Vector3(
            50 + 10, // X轴动态偏移量
            20 + 10,  // Y轴固定高度
            40 + 10  // Z轴基础距离
        );
        const cameraTargetPos = modelWorldPos.clone().add(cameraOffset);
        moveCamera(cameraTargetPos, modelWorldPos, () => {
            setTimeout(() => {
                waterPopupRef.value.open();
            }, 500)
        });
    })
}
/** 隐藏积水 */
const clearWater = () => {
    const children = masterModel.children.find((child) => child.name === '西藏欢迎您')
    children.children.forEach((item) => {
        item.children[item.children.length - 2].visible = false
        item.children[item.children.length - 1].visible = false
    })
}

/** 加载道路上的图标 */
const loadRoad = () => {
    if (!masterModel) return;
    roadData.forEach(item => {
        const model = masterModel.children.find(v => v.name === item.name)
        if (!model) return
        const dom = document.createElement('div')
        dom.className = 'road';
        dom.innerHTML = `
            <img class="img" src="${item.img}" alt="">
        `;
        // 添加点击事件
        dom.addEventListener('click', (e) => {
            e.stopPropagation();
            clickRoad(item, model);
        });
        const tag = new CSS2DObject(dom)
        tag.position.z += 4 // 标签高度偏移量
        model.add(tag) // 标签跟随父对象移动
    })
}
/** 点击道路图标 */
const clickRoad = (item, model) => {
    const modelWorldPos = new THREE.Vector3();
    model.getWorldPosition(modelWorldPos);
    const cameraOffset = new THREE.Vector3(
        Math.sin(Date.now() * 0.002) * 5, // X轴动态偏移量
        20,  // Y轴固定高度
        40  // Z轴基础距离
    );
    const cameraTargetPos = modelWorldPos.clone().add(cameraOffset);
    moveCamera(cameraTargetPos, modelWorldPos);
}
/** 隐藏道路上的图标 */
const clearRoad = () => {
    if (!masterModel) return;
    roadData.forEach((item) => {
        const obj = masterModel.children.find((child) => child.name === item.name)
        if (!obj || !obj.children.length) return
        obj.children[obj.children.length - 1].visible = false
    })
}

const mixers = []; // 全局存储所有动画混合器
/** 加载汽车模型 */
const loadCar = () => {
    cardData.forEach(item => {
        loader.load(item.url, (gltf) => {
            const model = gltf.scene;
            model.name = item.name;
            scene.add(model);
            console.log("gltf", gltf);
            // 创建CSS2D标签
            const dom = document.createElement('div')
            dom.className = 'card';
            dom.innerHTML = `
                <img class="img" src="${item.img}" alt="">
            `;
            // 添加点击事件
            dom.addEventListener('click', (e) => {
                e.stopPropagation();
                clickCar(item, model);
            });
            const label = new CSS2DObject(dom);
            label.position.set(0, 10, 0);
            label.name = 'label';
            label.visible = false
            model.children[0].add(label);

            const dom2 = document.createElement('div')
            dom2.className = 'cardPopup';
            dom2.innerHTML = `
            <div class="title">车辆信息</div>
            <div class="content">
              <div class="item">
                <span>车牌号：</span>
                <span>${item.data.number}</span>
             </div> 
              <div class="item">
                <span>车辆类型：</span>
                <span>${item.data.type}</span>
             </div>
              <div class="item">
                <span>行驶速度：</span>
                <span class="speed">${item.data.speed}km/h</span> 
             </div>
              <div class="item">
                <span>海拔高度：</span>
                <span>${item.data.altitude}M</span>
             </div>
            </div>
            `
            const label2 = new CSS2DObject(dom2);
            label2.position.set(0, 2, 0);
            label2.name = 'popup';
            label2.visible = false
            model.children[0].add(label2);

            // 创建动画混合器
            const mixer = new THREE.AnimationMixer(model);
            mixer.speed = 0.1;
            mixers.push(mixer);
            // 播放动画
            const action = mixer.clipAction(gltf.animations[0]);
            action.play();
            // model.userData.cardData = item;
            // label.updateMatrixWorld(true);
        });
    });
};
/** 显示汽车模型标签 */
const showCarLabel = () => {
    scene.traverse((child) => {
        cardData.forEach(item => {
            if (child.name == 'label') {
                child.visible = true
            }
            if (child.name == 'popup') {
                child.visible = false
            }
        })
    })
}
/** 隐藏汽车模型标签 */
const clearCarLabel = () => {
    scene.traverse((child) => {
        if (child.name == 'label') {
            child.visible = false
        }
        if (child.name == 'popup') {
            child.visible = false
        }
    })
}
let followTarget = null; // 跟踪的目标
let requestAnimationFrameId2 = null; // 跟踪的目标
const cameraOffset = new THREE.Vector3(10, 5, 0);
const lerpAlpha = 0.1; // 阻尼系数，范围 0–1  
/** 点击汽车标签 */
const clickCar = (item, model) => {
    // 清除之前的标签（popup）
    scene.traverse((child) => {
        if (child.name == 'popup') child.visible = false
    })
    model.children[0].children.find(i => i.name == 'popup').visible = true
    followTarget = model.children[0];
    carloop()
};

const carloop = () => {
    requestAnimationFrameId2 = requestAnimationFrame(carloop);
    if (followTarget) {
        // 1. 世界空间的位置与旋转
        const worldPos = new THREE.Vector3();
        const worldQuat = new THREE.Quaternion();
        followTarget.getWorldPosition(worldPos);
        followTarget.getWorldQuaternion(worldQuat);
        // 2. 偏移向量按模型朝向旋转
        const localOffset = cameraOffset.clone().applyQuaternion(worldQuat);
        // 3. 目标相机位置
        const desiredPos = worldPos.clone().add(localOffset);
        // 4. 平滑过渡
        camera.position.lerp(desiredPos, lerpAlpha);
        controls.target.lerp(worldPos, lerpAlpha);
    }
}

const clearCarLoop = () => {
    followTarget = null;
    requestAnimationFrameId2 && cancelAnimationFrame(requestAnimationFrameId2);
};


const initThree = () => {
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.domElement.style.zIndex = -1;
    container.value.appendChild(renderer.domElement);

    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    controls = new OrbitControls(camera, renderer.domElement);

    // controls.enableDamping = true;
    // controls.dampingFactor = 0.25;
    // controls.enablePan = true;     // 启用平移
    // 控制器限制
    controls.minDistance = 0; // 最小距离
    controls.maxDistance = 300; // 最大距离

    controls.minPolarAngle = 0;          // 0 = 正上方
    controls.maxPolarAngle = Math.PI / 2;  // π/2 = 水平视角

    camera.position.set(0, 0, 0);
    controls.target.set(0, 0, 0);
    controls.update();

    // 添加天空颜色
    scene.background = new THREE.Color(0x87CEEB); // 天空蓝色

    // 添加环境光
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(ambientLight);

    // 添加平行光
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(5, 5, 5);
    scene.add(directionalLight);

    // 创建时钟
    clock = new THREE.Clock();

    // 创建gsap时间线
    globalTime = gsap.timeline({ paused: true });
}

// 创建css2渲染器
const initCSS2Renderer = () => {
    css2Renderer = new CSS2DRenderer();
    css2Renderer.setSize(window.innerWidth, window.innerHeight);
    css2Renderer.domElement.style.position = 'absolute';
    css2Renderer.domElement.style.top = '0px';
    css2Renderer.domElement.style.pointerEvents = 'none';
    css2Renderer.domElement.classList.add('css2');
    container.value.appendChild(css2Renderer.domElement);
    css2Renderer.domElement.style.zIndex = 0;
}
/** 初始化draco */
const initDraco = () => {
    draco = new DRACOLoader();
    draco.setDecoderPath('/draco/');
}
/** 初始话loader */
const initLoader = () => {
    loader = new GLTFLoader();
    loader.setDRACOLoader(draco);
}

/** 加载主体模型 */
const loadModel = () => {
    loading.value = true
    loader.load(
        '/整体.gltf',
        (gltf) => {
            loading.value = false
            const model = gltf.scene;
            masterModel = model
            scene.add(masterModel);
            camera.position.set(-14, 73, 100);
            camera.lookAt(masterModel.position);
            controlShow()
            // loadWater();
            // loadRoad();
            // createWeather('sunny', scene);
            // loadCar()
        },
        (progress) => {
            const s = progress.loaded / progress.total;
            console.log('加载进度:', s);
            loadingText.value = `加载进度: ${Math.floor(s * 100)}%`;
        },
        (error) => {
            console.error('GLB加载失败:', error);
        }
    );
}

/** 移动相机 */
const moveCamera = (targetPos, lookAtPos, onComplete = () => { }) => {
    if (!lookAtPos) {
        lookAtPos = new THREE.Vector3(0, 0, 0);
    }
    if (globalTime.isActive()) return;

    globalTime
        .to(camera.position, {
            x: targetPos.x,
            y: targetPos.y,
            z: targetPos.z,
            duration: 2,
            ease: "power2.inOut",
            onStart: () => {
                controls.enabled = false;
                // lastCameraPos.copy(camera.position);
            },
            onUpdate: () => {
                camera.lookAt(lookAtPos);
                controls.target.lerp(lookAtPos, 0.1); // 平滑过渡目标点
            },
            onComplete: onComplete
        }, ">0.5") // 与前一个动画间隔0.5秒
        .call(() => {
            controls.enabled = true;
            // currentTarget = lookAtPos.clone();
        });
    globalTime.play()
};

// 添加动画循环
const animate = () => {
    requestAnimationFrame(animate);
    // 更新所有动画混合器
    const delta = clock.getDelta();
    mixers.forEach(mixer => {
        mixer.getRoot().updateMatrixWorld(true); // 关键：强制更新根节点矩阵
        mixer.update(delta)
    });

    // 确保场景矩阵更新
    scene.updateMatrixWorld(true);

    renderer.render(scene, camera);
    controls.update();
    css2Renderer.render(scene, camera);
}

// 添加窗口resize处理
const onWindowResize = () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    css2Renderer.setSize(window.innerWidth, window.innerHeight);
}

useViewEvent(({ detail }) => {
    const { x, y, z } = detail.postion;
    const targetPosition = new THREE.Vector3(x, y, z);
    moveCamera(targetPosition)
})

/** 创建辅助线 */
const createHelper = (position = {
    x: 0,
    y: 0,
    z: 0
}) => {
    const axesHelper = new THREE.AxesHelper(50);
    axesHelper.position.set(position.x, position.y, position.z); // 设置辅助线的位置
    scene.add(axesHelper);
}

// 添加GUI调试
const addDebugGUI = () => {
    gui = new GUI();
    // 相机位置控制
    const cameraFolder = gui.addFolder('相机位置');
    cameraFolder.add(camera.position, 'x', -300, 300).name('X轴');
    cameraFolder.add(camera.position, 'y', -300, 300).name('Y轴');
    cameraFolder.add(camera.position, 'z', -300, 300).name('Z轴');
    cameraFolder.open();

    // 相机旋转控制（弧度）
    const rotationFolder = gui.addFolder('相机旋转');
    rotationFolder.add(camera.rotation, 'x', 0, Math.PI * 2).name('X轴');
    rotationFolder.add(camera.rotation, 'y', 0, Math.PI * 2).name('Y轴');
    rotationFolder.add(camera.rotation, 'z', 0, Math.PI * 2).name('Z轴');
    rotationFolder.open();

    // 控制器目标位置（核心修复）
    const targetFolder = gui.addFolder('控制器目标');
    targetFolder.add(controls.target, 'x', -200, 200).name('X轴').onChange(() => controls.update());
    targetFolder.add(controls.target, 'y', -200, 200).name('Y轴').onChange(() => controls.update());
    targetFolder.add(controls.target, 'z', -200, 200).name('Z轴').onChange(() => controls.update());
    targetFolder.open();

}
onMounted(() => {
    initThree();
    initCSS2Renderer();
    initDraco();
    initLoader();
    loadModel();
    // addDebugGUI()
    // createHelper();
    animate();
    window.addEventListener('resize', onWindowResize);
    elRectification('.css2')
    elRectification('.map')
    watchCustomEvent()
});

onUnmounted(() => {
    window.removeEventListener('resize', onWindowResize);
    if (renderer) renderer.dispose();
});
</script>

<style scoped lang="scss">
.container {
    width: 100%;
    height: 100%;
}



/* 使用深度选择器穿透scoped */
.container :deep(canvas),
.container :deep(.css2) {
    width: 100% !important;
    height: 100% !important;

    .water {
        display: flex;
        align-items: center;

        .img {
            pointer-events: auto !important;
            width: 20px;
            height: 20px;
            cursor: pointer;
        }

        .text {
            font-weight: bold;
            color: #fff;
            font-size: 10px;
            transform: rotate(1deg);
            // 调整文字倾斜的原点
            transform-origin: center bottom; // 设置原点为元素的左上角
        }
    }

    .road {
        pointer-events: auto !important;
        width: 40px;
        height: 40px;
        transform: translate(-50%, -50%);

        .img {
            width: 100%;
            height: 100%;
        }
    }

    .card {
        pointer-events: auto !important;
        width: 30px;
        height: 30px;
        transform: translate(-50%, -50%);
        cursor: pointer;

        .img {
            width: 100%;
            height: 100%;
        }
    }

    .cardPopup {
        width: 256px;
        height: 200px;
        background: url('@/assets/imgs/map/border.png') no-repeat center center / contain;
        position: relative;

        .title {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 16px;
            font-weight: bold;
            color: white;
        }

        .content {
            margin-top: 50px;
            gap: 5px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-self: center;
            align-items: center;
            text-align: center;
            color: white;

            .item {
                display: flex;
                gap: 10px;
                align-items: center;

                &:first-child {
                    text-align: right;
                }
            }
        }
    }
}
</style>